<template lang="pug">
  .image_preivew_widget
    v-overlay(:value = "active")
      v-card(light)
        v-card-text
          .d-flex.flex-column.img-content-wrapper
            .preview-head.text-center
              v-btn.float-right(icon @click="toggle")
                v-icon.display-2 mdi-close
            .preview-body.d-flex
              .nav-section
                v-btn(icon text tile height="100%" @click="moveForward(-1)")
                  v-icon.display-2 mdi-chevron-left
              v-img(:src="selectedImageSrc"
                contain=true
                width="80vh"
                height="70vh"
                )
                template(v-slot:placeholder='')
                  v-row.fill-height.ma-0(align='center', justify='center')
                    v-progress-circular(indeterminate='', color='grey ')
              .nav-section
                v-btn(icon text tile height="100%" @click="moveForward(1)")
                  v-icon.display-2 mdi-chevron-right


</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import {clone} from 'lodash'

  export default (Vue as VueConstructor<Vue & {}>).extend({
    name: 'image_preview_gallery',
    methods: {
      moveForward(step: number = 1) {
        var targetIndex = this.selectedIndex + step
        if (targetIndex > this.imageUrls.length - 1) {
          targetIndex = 0
        }
        if (targetIndex < 0) {
          targetIndex = this.imageUrls.length - 1
        }
        this.selectedIndex = targetIndex
      },
      toggle(index: number = 0) {
        this.active = !this.active
        this.selectedIndex = index
      },
    },
    props: {
      images: {
        type: Array,
        required: true
      }
    },
    computed: {
      selectedImageSrc(): string {
        return this.imageUrls[this.selectedIndex] as string
      },
    },
    watch: {
      images: {
        handler(): void {
          this.imageUrls = clone(this.images) as Array<string>
        },
        immediate: true
      }
    },
    data() {
      return {
        imageUrls: [] as Array<String>,
        selectedIndex: 0 as number,
        active: false
      }
    }
  })
</script>

<style lang="scss">
  .image_preivew_widget {

  }
</style>